<template>
  <div class="icons">
    <van-icon name="setting-o" size="20px" class="set" @click="$router.push(`/set/${u_id}`)" />
    <van-icon name="ellipsis" size="20px" class="ell" :dot="true" />
  </div>
  <div class="log">
    <van-image class="set" round width="3rem" height="3rem" :src="UPL + `${u_img}`" />
    <div class="nav">
      <span>{{ u_name }}</span>
      <text>爱做饭的小汤圆</text>
    </div>
    <van-icon class="icon" name="arrow" size="20px" color="#black" @click="$router.push(`/edit/${u_id}`)" />
  </div>
  <div class="data">
    <div>
      <span>201</span>
      <text>关注</text>
    </div>

    |
    <div>
      <span>2.6w</span>
      <text>粉丝</text>
    </div>
    |
    <div class="trends">
      <span>32</span>
      <text>动态</text>
    </div>
  </div>
  <div class="content">
    <div class="member">
      <div class="remove">
        <span>VIP</span>
        <text>开通会员可免费制作精美请帖</text>
      </div>
      <div class="once">
        <van-button squre size="mini" class="btn">立即开通</van-button>
      </div>

    </div>
    <div class="order">
      <div>
        <img src="../../assets/tabbar/dongtai.png" alt="">
        <span>全部</span>
      </div>
      <div>
        <img src="../../assets/tabbar/dongtai.png" alt="">
        <span>待服务</span>
      </div>
      <div>
        <img src="../../assets/tabbar/dongtai.png" alt="">
        <span>已完成</span>
      </div>
      <div>
        <img src="../../assets/tabbar/dongtai.png" alt="">
        <span>待评价</span>
      </div>

    </div>
    <div class="myPet">
      <p>我的宠物</p>
      <div class="image">
        <van-image class="set" round width="3rem" height="3rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" size="15px" />
        <div class="round">
          <p>大圆圆</p>
          <text>春天的太阳</text>
        </div>
        <div class="add">
          <van-image round width="3rem" height="3rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            size="12px" />
        </div>
        <span>添加宠物</span>
      </div>

    </div>

    <div class="Identity">
      <p>萌宠身份</p>
      <div class="footer">
        <van-image class="set" round width="3rem" height="3rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" size="15px" />
        <span class="a">犬证办理</span>
        <van-icon class="ic" name="arrow" size="15px"></van-icon>
        <van-image class="set" round width="3rem" height="3rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" size="15px" />
        <span class="a">鼻纹录入</span>
        <van-icon class="ic" name="arrow" size="15px"></van-icon>

      </div>
    </div>

  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex'
import baseURL from "@/http/baseURL";
const UPL = baseURL.UPL + '/';

//获得登录用户数据
const user = useStore().state.user
const u_name = ref('')
const u_id = ref('')
const u_img = ref('')
onMounted(() => {
  u_name.value = user.u_name
  u_id.value = user.u_id
  u_img.value = user.u_img
})

</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.icons {
  margin-top: 25px;
  margin-right: 15px;
  margin-left: 10px;
  display: flex;
  justify-content: space-between;

}

.log {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
}

.set {
  margin-left: 15px;
}

.nav {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  margin-top: 3px;

  text {
    color: #cccccc;
    font-size: 10px;
    margin-top: 5px;
  }

}

.icon {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  margin-right: 10px;
}

.data {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 40px;

  div {
    display: flex;
    flex-direction: column;

    span {
      font-weight: bold;
      font-size: 20px;
    }

    text {
      color: #222;
      font-size: 10px;
      text-align: center;
    }
  }

  .trends {
    margin-right: 45px;
  }
}

.content {
  margin: auto;
  width: 93%;
  margin-top: 15px;

  .member {
    background-color: #444;
    color: azure;
    display: flex;
    flex-direction: row;
    border-radius: 10px;

    .remove {
      display: flex;
      flex-direction: column;
      padding: 15px;
      line-height: 18px;

      span {
        font-size: 25px;
      }

      text {
        font-size: 10px;
      }
    }
  }

  .once {
    margin: 20px 0 0 90px;

    .btn {
      background-color: gold;
      padding: 5px 5px;
    }
  }

  .order {
    border: 0.5px solid #AAAAAA;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    justify-content: space-around;
    padding: 10px 10px;
    background-color: ghostwhite;
    border-radius: 10px;

    div {
      display: flex;
      flex-direction: column;
      text-align: center;
      line-height: 20px;

    }

    img {
      width: 30px;
      height: 30px;
    }

    span {
      font-size: 10px;
      text-align: center;
    }
  }

  .myPet {
    border: 0.5px solid #AAAAAA;

    margin-top: 20px;

    padding: 10px 10px;
    background-color: ghostwhite;
    border-radius: 10px;

    p {
      font-size: 17px;
      font-weight: 500;
    }

    .image {
      display: flex;
      flex-direction: row;
      margin-top: 10px;

      .round {
        display: flex;
        flex-direction: column;
        margin: 5px 0 0 8px;
      }


      p {
        font-size: 15px;
        font-weight: bold;
      }

      text {
        font-size: 5px;
        color: #cccccc;
        margin-top: 3px;
      }
    }

    .add {
      margin-left: 50px;
    }

    span {
      font-size: 15px;
      font-weight: bold;
      margin: 10px 0 0 10px;
    }


  }

  .Identity {
    border: 0.5px solid #AAAAAA;

    margin-top: 20px;

    // padding: 10px 10px;
    background-color: ghostwhite;
    border-radius: 10px;

    p {
      margin: 10px 0 0 10px;
    }

    .footer {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .a {
      font-weight: 300;
      margin-top: 15px;
      margin-left: 10px;

    }

    .ic {
      margin-top: 20px;
      margin-left: 10px;
    }
  }

}
</style>